<html>

<head>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $('p:first').click(function () {
                //$('#dv_fade').fadeIn();
                $('#dv_fade').fadeIn('slow');
                //$('#dv_fade').fadeIn(800);
            });
            $('p:eq(1)').click(function () {
                $('#dv_fade').fadeOut(800);
            });
            $('p:eq(2)').click(function () {
                $('#dv_fade').toggle(1000);
            });
             $('p:eq(3)').click(function () {
                $('#dv_fade').fadeTo(1000,0.5);
                $('#dv_fade_to').fadeTo(1000,0.7);
            });
        })
    </script>
    <style>
        .fadein_div {
            display: none;
            background-color: yellowgreen;
            width: 800px;
            height: 200px;
            color: red;
        }

        .fadeto_div {
            background-color: yellowgreen;
            width: 200px;
            height: 200px;
            color: red;
        }
    </style>
</head>
<div>
    <div class="fadein_div" id="dv_fade">
        淡入
    </div>
    <p>将隐藏内容淡入</p>
    <p>将显示内容淡出</p>
    <p>开关按钮淡入淡出</p>
    <p>给定渐变的不透明度</p>
    <div class="fadeto_div" id="dv_fade_to"></div>
</div>

</html>